<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Testing Application</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

<style type="text/css">
iframe {
	display: block;
	border: solid #efefef;
	border-width: 60px 10px;
	margin: auto;
	box-shadow: 0 0 10px silver;
	border-radius: 10px;
}

</style>
</head>
<body>
	<iframe id="demo" src="home" sandbox="allow-same-origin allow-forms" seamless="" width="480" height="640"></iframe>
	<div style="position: fixed; top: 0; left: 0;">
		<button class="btn btn-default" data-resolution="320x480">320x480</button>
		<button class="btn btn-default" data-resolution="480x640">480x640</button>
		<button class="btn btn-default" data-resolution="768x1024">768x1024</button>
	</div>

	<script type="text/javascript">
		var buttons = document.querySelectorAll("button");
		for (var i = 0; i < buttons.length; i++) {
			buttons[i].addEventListener("click", changeResolution, false);
		}
		var iframe = document.querySelector("#demo");
		function changeResolution(e) {
			e = e || window.event;
			var target = e.srcElement || e.target;
			var res = target.getAttribute("data-resolution").split("x");
			iframe.width = +res[0];
			iframe.height = +res[1];

		}
	</script>
</body>
</html>